<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: header}">
</head>
<body>
	<!-- Page Content -->
	<div class="container blog-content-container">

		<div class="row">

			<!-- Blog Entries Column -->
			<div class="col-md-8">

				<!-- Blog Post -->
				<div class="card mb-4">
					<div class="card-block">
						<h2 class="card-title">
							<span> <a href="/u/tom" title=""
								th:href="'/u/' + ${blogModel.user.username}"
								th:title="${blogModel.user.username}"> <img
									src="/images/avatar-default.jpg"
									th:src="${blogModel.user.avatar} == null ? '/images/avatar-default.jpg' : ${blogModel.user.avatar}"
									class="blog-avatar-50">
							</a>
							</span> <a href="/u/tom/blogs/1" class="card-link" title=""
								th:href="'/u/' + ${blogModel.user.username} + '/blogs/'+ ${blogModel.id}"
								th:title="${blogModel.user.username}"
								th:text="${blogModel.title}"> OAuth 2.0 认证的原理与实践 </a>
						</h2>
						<div class="card-text">
							<a href="/u/tom" th:href="'/u/' + ${blogModel.user.username}"
								class="card-link" th:text="${blogModel.user.username}">tom</a>
							发表于 [[${#dates.format(blogModel.createTime, 'yyyy-MM-dd
							HH:mm')}]] <i class="fa fa-eye" aria-hidden="true">[[${blogModel.readCount}]]</i>
							<i class="fa fa-heart-o" aria-hidden="true">[[${blogModel.voteCount}]]</i>
							<i class="fa fa-comment-o" aria-hidden="true">[[${blogModel.commentCount}]]</i>
							<a href="/u/tom" th:if="${isBlogOwner}"
								th:href="'/u/' + ${blogModel.user.username}+ '/blogs/edit/'+ ${blogModel.id}"
								class="btn btn-primary float-right">编辑</a> <a
								href="javascript:void(0)" th:if="${isBlogOwner}"
								th:attr="blogUrl='/u/' + ${blogModel.user.username} + '/blogs/'+ ${blogModel.id}"
								class="btn btn-primary float-right blog-delete-blog">删除</a>
						</div>
						<hr>
						<article class="post-content" th:utext="${blogModel.htmlContent}">

						</article>
						<hr>
					</div>
					<div class="card-block">


						<h5>
							分类：<a th:href="@{'/u/'+${blogModel.user.username}+'/blogs?category='+${blogModel.catalog.id}}">[[${blogModel.catalog.name}]]</a>
						</h5>

						<h5 >标签：
                        <a th:each="tag : ${#strings.arraySplit(blogModel.tags , ',')}" th:href="'/u/' + ${blogModel.user.username}  + '/blogs?keyword='+ ${tag}"> <span class="badge badge-default" th:text="${tag}">Web Design</span></a>
                    	</h5>
					</div>

					<div class="card-block">


						<div sec:authorize="isAuthenticated()">
							<h5>评论：</h5>
							<div class="row">
								<div class="col-lg-12">
									<textarea class="blog-textarea" placeholder="看帖需留言~" id="commentContent"></textarea>
								</div>
							</div>
							<button class="btn btn-primary float-right" id="submitComment">发表评论</button>
							<button class="btn btn-primary float-right" th:if="${currentVote} == null" id="submitVote">点赞</button>
					    	<button class="btn btn-primary float-right" th:if="${currentVote}" th:attr="voteId=${currentVote.id}" id="cancelVote">取消点赞</button>
						</div>
						<div sec:authorize="isAnonymous()">
							<a class="list-group-item float-right" href="/login" th:href="@{/login}">登录发表评论~</a>
						</div>
					</div>
					<div class="card-block" id="mainContainer">

						<div class="row" id="mainContainerRepleace"
							th:each="comment,commentIndex : ${comments}"
							th:object="${comment}">
							<h2 class="card-title col-lg-1 col-md-2">
								<span> <a href="/u/tom"
									th:href="'/u/'+ *{user.username}" title=""
									th:title="*{user.username}"> <img
										src="/images/avatar-default.jpg"
										th:src="*{user.avatar} == null ? '/images/avatar-default.jpg' : *{user.avatar}"
										class="blog-avatar-50">
								</a>
								</span>
							</h2>
							<div class="card-text col-lg-11 col-md-10">
								<a href="/u/tom" th:href="'/u/'+ *{user.username}"
									class="card-link" th:text="*{user.username}"></a>
								[[${commentIndex.index} + 1]]楼
								[[${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}]] <a
									href="javascript:void(0)" class="blog-delete-comment"
									th:if="${commentOwner} eq *{user.username}"
									th:attr="commentId=*{id}"><i class="fa fa-trash-o"
									aria-hidden="true"></i></a>
								<p th:text="*{content}">不错哦，顶起！</p>
							</div>
						</div>

					</div>
				</div>

			</div>

			<!-- 右侧栏目 -->
			<div class="col-md-4">
				<div>
					<!-- 文章目录 -->
					<div class="card ">
						<h5 class="card-header">
							<i class="fa fa-bars" aria-hidden="true"></i> 文章目录
						</h5>
						<div class="card-block">
							<div class="row">
								<div id="catalog" class="col-lg-12"></div>
							</div>
						</div>
					</div>


					<!-- 相关博客 -->
					<div class="card my-4">
						<h5 class="card-header">
							<i class="fa fa-connectdevelop" aria-hidden="true"></i> 相关博客
						</h5>
						<div class="list-group">
							<ul class="list-group">
								<li><a href="/u/waylau/blogs/1" class="list-group-item"
									title=""> Spring Data + Thymeleaf 3 + Bootstrap 4
									实现分页器 </a>
								</li>
							</ul>
						</div>

					</div>

				</div>
			</div>

		</div>
		<!-- /.row -->

	</div>
	<!-- /.container -->


	<div th:replace="~{fragments/footer :: footer}">...</div>
	
	<!-- JavaScript -->
<script th:inline="javascript">
var blogId = [[${blogModel.id}]];
var blogUrl = '/u/' + [[${blogModel.user.username}]] + '/blogs/'+ [[${blogModel.id}]] ;
</script>
	<script src="../../js/userspace/blog.js"
		th:src="@{/js/userspace/blog.js}"></script>
</body>
</html>